/**
 * Created by yujianfu on 2016/11/17.
 */
import React, {Component, PropTypes} from 'react'
import {Form, message, Select, Input, Button, Icon} from 'antd'
import {fetchPost} from './../../../utils/request'
import Styles from './Index.less'

const FormItem = Form.Item
const Option = Select.Option

class Add extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      firstMenus: null,
      secondMenus: null,
      params: {
        firstMenu: null,
        secondMenu: null,
        name: null,
        url: null
      }
    }
  }

  componentDidMount() {
    this.getFirstMenus()
  }

  handleSubmit(e) {
    e.preventDefault()
    const {firstMenu, secondMenu, name, url, menuType} = this.props.form.getFieldsValue()
    if (typeof (name) === 'undefined') {
      message.error('Required items can not be empty')
    } else {
      this.setState({
        params: {
          firstMenu,
          secondMenu,
          name,
          url,
          menuType,
        }
      }, () => {
        this.createMenu()
      })
    }
  }

  createMenu() {
    fetchPost('/menu/add', this.state.params).then(json => {
      if (json.code === 0) {
        message.info('Add Success')
        this.props.form.resetFields()
      } else {
        message.error(json.msg)
      }
    })
  }

  getFirstMenus() {
    fetchPost('/menu/parent/0/list', this.state.params).then(json => {
      if (json.data != null) {
        let data = json.data.list
        this.setState({
          firstMenus: data
        })
      }
    })
  }

  getSecondMenus(firstMenuId) {
    fetchPost(`/menu/parent/${firstMenuId}/list`, {}).then(json => {
      if (json.data != null) {
        let data = json.data.list
        this.setState({
          secondMenus: data
        })
      }
    })
  }

  handleReset(e) {
    e.preventDefault()
    this.props.form.resetFields()
  }

  createFirstClassMenus(menus) {
    if (menus == null || menus.length === 0) {
      return <Option key='null'>NON</Option>
    }

    let res = []
    res.push(<Option key='null'>NON</Option>)
    menus.map(function (menu) {
      res.push(<Option key={menu.id}>{menu.name}</Option>)
    })

    return res
  }

  changeFirstClass(classId) {
    this.getSecondMenus(classId)
  }

  render() {
    const {getFieldDecorator} = this.props.form

    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14}
    }

    return (
      <div className={Styles.addClass}>
        <Form horizontal onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label='Root Menu'
          >
            {getFieldDecorator('firstMenu')(
              <Select placeholder='Choose First Menu' onChange={(e) => this.changeFirstClass(e)}>
                {this.createFirstClassMenus(this.state.firstMenus)}
              </Select>
            )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label='Second Menu'
          >
            {getFieldDecorator('secondMenu')(
              <Select placeholder='Choose Second Menu'>
                {this.createFirstClassMenus(this.state.secondMenus)}
              </Select>
            )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label='Name'
            hasFeedback
          >
            {getFieldDecorator('name', {
              rules: [
                {required: true, message: 'Name can not be empty'}
              ]
            })(
              <Input/>
            )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label='Menu Type'
          >
            {getFieldDecorator('menuType', {
              initialValue: '0',
              rules: [{
                required: true, message: '请输入额度'
              }]
            })(
              <Select placeholder='Choose Menu Type'>
                <Option key='0'>内部使用</Option>
                <Option key='1'>商户通用</Option>
                <Option key='2'>自定义(不同步)</Option>
              </Select>
            )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label='URL'
            hasFeedback
          >
            {getFieldDecorator('url')(
              <Input/>
            )}
          </FormItem>

          <FormItem wrapperCol={{span: 12, offset: 6}}>
            <Button type='primary' onClick={(e) => this.handleSubmit(e)}>Create Menu</Button>
            &nbsp;
            <Button type='ghost' onClick={(e) => this.handleReset(e)}><Icon type='reload'/></Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}

Add = Form.create()(Add)
export default Add
